<style>
    .book-list {
        margin: 10px 0;
        border: 1px solid #f2f2f2;
        border-radius: 5px;
        background-color: #fbfbfb;
        width: 100%;
    }
    .book-list img {
        width: 100%;margin: 10px;
    }

    .book-list-desc {
        margin: 10px;
    }

    .book-list-desc span{
        margin-right: 5px;
        color: #7d7d7d;
    }

</style>
<h1>最新图书</h1>

    <ul>
        {volist name="books_list" id="vo"}
        <li>
            <div class="book-list">

                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md2">
                    <img src="{$vo.book_img}" alt="">
                </div>
                    <div class="layui-col-md8">
                    <div class="book-list-desc">
                        <h2 >{$vo.book_name}</h2>
                        <span>作者：{$vo.book_auth}</span>
                        <span>出版社：{$vo.book_man}</span>
                        <span>剩余数量：{$vo.book_num}</span>
                        <p style="margin-top: 10px; overflow: hidden">{$vo.book_dec}</p>
                    </div>
                </div>
                    <div class="layui-col-md2">
                        <button onclick="doBorrow({$vo.book_id})" class="layui-btn layui-btn-normal layui-btn-fluid" >借阅</button>
                    </div>
                </div>
            </div>
        </li>
        {/volist}
    </ul>


<div id="index-page"></div>



<script>



    layui.use('laypage', function(){
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'index-page' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: {$books_count} //数据总数，从服务端得到
            ,limit: {$limit}//数据总数，从服务端得到
            , curr:{$page}
            ,jump: function(obj, first){
                if(!first){
                    window.location.href = '/index/index/index/page/'+obj.curr;
                }
            }
        });
    });
</script>